import React, { useState, useCallback } from 'react';
import { Form, Input, Select, Button, Row, Col, InputNumber, Radio } from 'antd'
import ResponseField from '../response-field'

import '../index.less'

export default function IndexPage(props: any) {

  const [fields, setFields] = useState([]);
  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const onFinish = useCallback(
    (values) => {
      values.projectId = props.location.query.projectId;
      values.fields = fields;
      window.fetch("/api/interface", {
        body: JSON.stringify(values), method: "post", headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });
    },
    [fields],
  )

  function dataChange(data: any) {
    setFields(data);
  }

  return (
    <div style={{ margin: "0 auto", paddingTop: 60, width: 600, textAlign: 'center' }}>

      <Row>
        <Col span={16} push={8}>
          <h1 style={{ marginBottom: 60 }}>添加接口</h1>
        </Col>
      </Row>

      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        style={{ textAlign: 'left' }}
        form={form}
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="url"
          name="url"
          rules={[{ required: true, message: '请输入' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="请求方式(method)"
          name="method"
          rules={[{ required: true, message: '请选择' }]}
        >
          <Select>
            <Select.Option value="get">get</Select.Option>
            <Select.Option value="post">post</Select.Option>
            <Select.Option value="delete">delete</Select.Option>
            <Select.Option value="put">put</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="数据类型"
          name="dataType"
          initialValue="array"
        >
          <Radio.Group>
            <Radio value="array">数组</Radio>
            <Radio value="object">对象</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item shouldUpdate noStyle>
          {
            () => (form.getFieldValue("dataType") === "array") && (
              <>
                <Form.Item
                  label="数组最小长度"
                  name="arrayMinLength"
                  initialValue={1}
                >
                  <InputNumber step={1} />
                </Form.Item>
                <Form.Item
                  label="数组最大长度"
                  name="arrayMaxLength"
                  initialValue={10}
                >
                  <InputNumber step={1} />
                </Form.Item>
              </>
            )
          }
        </Form.Item>
        <Form.Item
          label="模拟延时(单位毫秒)"
          name="delay"
        >
          <InputNumber step={10} />
        </Form.Item>
        <Form.Item
          label="描述"
          name="desc"
        >
          <Input.TextArea rows={3} />
        </Form.Item>
        <div style={{ position: 'fixed', right: 20, top: 20, width: 100 }}>
          <Button size="large" type="primary" htmlType="submit" block>
            保存
          </Button>
        </div>
      </Form>
      <div style={{ textAlign: 'left' }}>
        <h1>响应参数列表</h1>
        <ResponseField onDataChange={dataChange} />
      </div>
    </div>
  );
}
